<template>
<div class="table-responsive">
  <table class="table table-bordered">
    <thead v-if="cfg.showHead">
      <tr>
        <th v-for="column in cfg.columns" :style="{width: column.width}">{{column.name}}</th>
      </tr>
    </thead>  
    <tbody>
      <tr v-for="item in list" class="my-table-tr">
        <td v-for="column in item.columns" class="my-table-td multi-line">
          {{{showVal(item, column)}}}
        </td>
      </tr>
    </tbody>
  </table>        
</div>
</template>

<script>
export default {
  props: {
    cfg: {
      type: Object,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    showVal (item, column) {
      if (column.show) {
        return column.show(item, column)
      } else {
        return column.value
      }
    }
  }
}
</script>

<style scoped>
.my-table-th {
  position: relative;
  text-align: left;
}
.my-table-td {
  text-align: left;
}
</style>